<template>
  <div>
    <header><h1>部分作品展示</h1></header>
    <div class="content-box">
      <div v-for="(item, index) in dataList" :key="index" @click="collapseClick(index)">
        <collapse :name="item.name">
        <template v-if="activeName===index">
          <div style="text-align: left;">
              <div style="width: 90%;margin: 0 auto">
                <p style="font-size:0.18rem"><span style="font-weight: bold;font-size:0.18rem">技术：</span>{{item.skill}}</p>
                <p style="font-size:0.18rem"><span style="font-weight: bold;font-size:0.18rem">开发周期：</span>{{item.cycle}}</p>
                <p style="font-weight: bold;font-size:0.18rem">简介：</p>
                <p style="font-size:0.18rem;text-indent: 2em;" v-for="p in item.remarks" :key="p">{{p}}</p>
              </div>
            </div>
            <div class="content-img-box" v-if="item.isMobile">
              <img class="content-img" v-for="img in item.imgs" :key="img" :src="img" alt="">
            </div>
            <img v-else style="width:calc(100% - 1rem);"  v-for="img in item.imgs" :key="img" :src="img" alt="">
        </template>
      </collapse>
      </div>
    </div>
  </div>
</template>
<script>
import Collapse from '../components/Collapse.vue'
export default {
  components: {
    Collapse
  },
  data() {
    return {
      length: 0,
      //type 1：企业 2：校园
      dataList:[
        {
          name:"Q-plant-PAD(企业)",
          skill:"前端：Vue+uniapp",
          cycle:"2022.1-?",
          remarks:[
            "蔚来汽车的项目（NIO）",
          ],
          imgs: [
            require('@/assets/works6/1.png'),
            require('@/assets/works6/2.png'),
            require('@/assets/works6/3.png'),
            require('@/assets/works6/4.png'),
            require('@/assets/works6/5.png'),
            require('@/assets/works6/6.png'),
          ],
          isMobile: true,
        },
        {
          name:"Q-plant-PC(企业)",
          skill:"前端：Vue+IView",
          cycle:"2022.1-?",
          remarks:[
            "蔚来汽车的项目（NIO）",
          ],
          imgs: [
            require('@/assets/works8/1.png'),
            require('@/assets/works8/2.png'),
            require('@/assets/works8/3.png'),
            require('@/assets/works8/4.png'),
            require('@/assets/works8/5.png'),
            require('@/assets/works8/6.png'),
          ],
          isMobile: false,
        },
        {
          name:"Program Spaces(企业)",
          skill:"前端：Vue+ElementUI",
          cycle:"2021.9-2021.12(四月)",
          remarks:[
            "蔚来汽车的项目（NIO）",
          ],
          imgs: [
            require('@/assets/works7/1.png'),
            require('@/assets/works7/2.png'),
            require('@/assets/works7/3.png'),
            require('@/assets/works7/4.png'),
            require('@/assets/works7/5.png'),
          ],
          isMobile: false,
        },



        {
          name:"卓优商学院(企业)",
          skill:"java式前后端分离半vue项目",
          cycle:"2021.03-2021.08",
          remarks:[
            "卓优商学是重庆卓优商学科技有限公司旗下的一款专注理财实践在线教育服务平台，卓优商学专注理财实战教育，为理财小白提供专业系统、生动且温暖的理财教育服务，帮助理财小白树立正确的金钱观、理财观、掌握正确的理财方法。" ,
            "部分工作内容描述：卓优商学首页分早晚报展示、早晚报列表、早晚报详情、音频播放器。",
          ],
          imgs:[
            require('@/assets/works4/1.png'),
            require('@/assets/works4/2.png'),
            require('@/assets/works4/3.png'),
          ],
          isMobile: true
        },
        {
          name:"帮考网(企业)",
          skill:"java式前后端分离半vue项目",
          cycle:"2021.03-2021.08",
          remarks:[
            "帮考网-考证在线直播学习平台，为考生提供全程考证学习辅导服务，让考证变得简单。为考生提供全程考证学习辅导服务。覆盖多种学习科目，满足不同职业的学习需求，包含注册消防工程师、注册会计师、建造师、会计职称、证券从业、基金从业、期货从业、银行从业等多种职称考试类型，无论你是在职还是在校，小白还是有经验，都能在这里找到适合你的课程及学习资料。",
            "部分工作内容描述：首页、我的课程页、以及考试科目切换。"
          ],
          imgs:[
            require('@/assets/works5/1.png'),
            require('@/assets/works5/2.png'),
            require('@/assets/works5/3.png'),
          ],
          isMobile: true
        },
        {
          name:"时尚衣柜(校园)",
          skill:"微信小程序（云开发）",
          cycle:"2020.02-2020.04",
          remarks:[
            "除正常的商城功能外，还设计了一个推文系统，并且为推文和商品提供一个相互连接的纽带。推文中链接商品，商品中链接推文，让用户提高购物体验。",
          ],
          imgs:[
            require('@/assets/works1/bw1.jpg'),
            require('@/assets/works1/bw2.jpg'),
            require('@/assets/works1/bw3.jpg'),
            require('@/assets/works1/bw4.jpg'),
            require('@/assets/works1/bw5.jpg'),
            require('@/assets/works1/dp1.jpg'),
            require('@/assets/works1/dp2.jpg'),
            require('@/assets/works1/dp3.jpg'),
            require('@/assets/works1/dp4.jpg'),
            require('@/assets/works1/dp5.jpg'),
            require('@/assets/works1/sp1.jpg'),
            require('@/assets/works1/sp2.jpg'),
            require('@/assets/works1/sp3.jpg'),
            require('@/assets/works1/sp4.jpg'),
            require('@/assets/works1/sp5.jpg'),
            require('@/assets/works1/sp6.jpg'),
            require('@/assets/works1/sp7.jpg'),
            require('@/assets/works1/sp8.jpg'),
          ],
          isMobile: true
        },
        {
          name:"课程管理系统(校园)",
          skill:"前端：Vue+ElementUI  SpringBoot+Shiro+MybatisPlus+MySQL",
          cycle:"2020.11-2020.12(六周)",
          remarks:[
                  "整个系统分管理员、领导、老师、学生这四个角色。",
                  "①管理员：用户管理、权限管理、班级管理、课程管理、批次管理、教室管理。",
                  "②领导：设置学习课程、审核课程、数据统计报表。",
                  "③老师：查询教学课表、申请调课、录入考试成绩。",
                  "④学生：查询学习课表、查询考试成绩。"
          ],
          imgs: [
            require('@/assets/works3/1.png'),
            require('@/assets/works3/2.png'),
          ],
          isMobile: false,
        }

      ],
      activeName:0
    }
  },
  mounted() {
    if(window.innerWidth>=640){
      this.length = parseInt(window.innerWidth / 300)
    }else{
      this.length = parseInt(window.innerWidth / (303 * (window.innerWidth / 640)))
    }
  },
  methods:{
    collapseClick(index) {
      this.activeName = index
    }
  }
}
</script>
<style scoped>
.el-collapse-item__header{
  height: 0.38rem !important;
  line-height: 0.38rem !important;
  padding: 0 0.6rem;
}
.content-box {
  width: 100%;
  height: calc(100vh - 1rem);
  overflow-y: scroll; /* 让它显示滚动条 */
  /*overflow-x: scroll; /!* 横向滚动条 *!/*/
}

.content-img-box{
  display: flex;
  justify-content:space-around;
  flex-wrap: wrap;
}
.content-img {
  margin: 0.1rem;
  width: 2.8rem;
  background-color: cornflowerblue;
  box-shadow:2px 2px 5px #000;
}
header {
  background-color: #3dd1c5;
  width: 100%;
  height: 1rem;
}
header>h1{
  font-size: 0.5rem;
  line-height: 1rem;
}
</style>